<template> 
    <div>
        <!--<el-submenu  :index="menuIndexFilter(item2.menuSort)" v-for="item2 in value" :key="item2.menuSort" v-if="item2.childList.length>0?true:false">
            <template slot="title"><a class="router"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.menuName}}</a></template>
            <tree-menu  :value="item2.childList" :index="menuIndexFilter(item2.menuSort,index)"></tree-menu>
        </el-submenu>
        <el-menu-item :index="menuIndexFilter(item2.menuSort,index)"  :key="item2.menuSort" v-else><router-link class="router" :to="item2.menuUrl+'&target='+menuIndexFilter(item2.menuSort,index)"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.menuName}}</router-link></el-menu-item>   
        -->
        <el-submenu  :index="menuIndexFilter(item2.id)" v-for="item2 in value" :key="item2.menuSort" v-if="item2.childList && item2.childList.length>0?true:false">
            <template slot="title"><a class="router"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.name}}</a></template>
            <!--<el-menu-item :index="menuIndexFilter(item2.menuSort,item3.menuSort)" v-for="item3 in item2.childList"><router-link class="router" :to="item3.menuUrl+'&target='+menuIndexFilter(item2.menuSort,item3.menuSort)"><i class="fa" :class="item3.menuIconCls" aria-hidden="true"></i>{{item3.menuName}}</router-link></el-menu-item>-->
            <tree  :value="item2.childList" :index="menuIndexFilter(item2.id,index)"></tree>
        </el-submenu>
        <el-menu-item :index="menuIndexFilter(item2.id,index)"  :key="item2.setid" v-else>
            <!--<template v-if="item2.isnext" class="deptGroup"  slot="title"><a @click="getChildrenList(item2)"   class="router " :class="{'deptGroup':deptGroup}" :title="item2.descrshort"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.descrshort}}</a></template>-->
            <router-link v-if="item2.isnext" class="deptGroup router" :to="item2.menuUrl+'?q='+FilterNull(item2.descrshort)+'&leaderType='+FilterNull(item2.leaderType)+'&target='+menuIndexFilter(item2.isnext+','+item2.deptid+','+item2.setid,index)+'&isnext='+FilterNull(item2.isnext)+'&type='+FilterNull(item2.type)+'&setid='+FilterNull(item2.setid)+'&deplid='+FilterNull(item2.deptid)" :title="item2.descrshort"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.name}}</router-link>
            <router-link v-else class="router" :to="item2.menuUrl" :title="item2.name"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.name}}</router-link>
        </el-menu-item>       
    
    </div> 
</template>
<script>
    export default {
        name:'tree',
        data(){
            return{
                deptGroup:true,
            }
        },
        components:{

        },
        computed:{

		},
        methods:{
            menuIndexFilter(_index,_index2){
	    		if(!_index2){
	    			return ""+_index;
	    		}
	    		return _index2+"-"+_index;
	    	},
            FilterNull:function(type){
                return type ? type : '';
            },
            getChildrenList:function(item){
                if (item.setid === 'CM666') {
                    this.$router.push("/keyEmpployeeTree");
                    return;
                }
                var setid = item.setid === 'CM777'?"" : item.setid;
                this.$router.push("/Group");
                // this.Axios.StringPost(this.URL.getDeptparentBylist.url ,{setid:setid,parent_deptid:parent_deptid},true).then(function(res){
                //     console.log(item,'getChildrenList');
                //     item.childList = res.data.datas.deptmune;
                    
                // })
            }
        },
        props:['value','index'],
        mounted:function(){

        }
    }
</script>
<style scoped>
    .sidebar .fa{
        width:20px;
    }
    .big-slider .router{
        display: inline-block;
        width: 100%;
        height: 100%;
        margin-left: -25px;
        padding: 0px 45px 0px 25px ;
    }
</style>
<style>
    .barBox>.el-menu>div>.el-submenu .el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 20px !important;
    }
    .barBox>.el-menu>div>.el-submenu .el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 20px !important;
    }
    .barBox>.el-menu>div>.el-submenu .el-menu>div>.el-submenu .el-menu>div>.el-menu-item{
        padding-left: 25px !important;
    }
    .barBox>.el-menu>div>.el-submenu .el-menu>div>.el-submenu .el-menu>div>.el-submenu .el-menu>div>.el-menu-item{
        padding-left: 30px !important;
    }
    .is-active .deptGroup{
        background-color:#F7FBFC;

    }

</style>


